<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('normal-withdraw')" :label="$t('language.finance.withdrawal.normalWithdrawal')" name="one">
        <el-tabs type="border-card" :value="subActiveTab" @tab-click="subChangeTab" v-show="activeTab === 'one'">
          <el-tab-pane v-if="roleCheck('auto')" name="one-auto" :label="$t('language.finance.withdrawal.thirdPartyAutoPayout')">
            <withdraw-auto-three v-show="subActiveTab === 'one-auto'"/>
          </el-tab-pane>
          <el-tab-pane v-if="roleCheck('auto-three')" name="one-one" :label="$t('language.finance.withdrawal.thirdPartyManualPayout')">
            <withdraw-auto v-show="subActiveTab === 'one-one'"/>
          </el-tab-pane>
          <el-tab-pane v-if="roleCheck('manual')" name="one-two" :label="$t('language.finance.withdrawal.manualPayout')">
            <withdraw-manual v-show="subActiveTab === 'one-two'"/>
          </el-tab-pane>
          <el-tab-pane v-if="roleCheck('auto-record')" name="one-one-record" :label="$t('language.finance.withdrawal.totalPayoutRecord')">
            <withdraw-auto-record v-show="subActiveTab === 'one-one-record'"/>
          </el-tab-pane>
          <!--<el-tab-pane v-if="roleCheck('manual')" name="one-two-record" label="人工出款记录">-->
            <!--<withdraw-manual-record v-show="subActiveTab === 'one-two-record'"/>-->
          <!--</el-tab-pane>-->
          <el-tab-pane v-if="roleCheck('withdraw-Seperate')" name="one-three-seperate" :label="$t('language.finance.withdrawal.withdrawalTxnDispense')">
            <withdraw-seperate v-show="subActiveTab === 'one-three-seperate'"/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('exception-withdraw')" label="异常提现处理" name="two">
        <withdraw-exceptions v-show="activeTab === 'two'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('withdraw-operation-audit')" label="提现操作审核" name="three">
        <withdraw-audit v-show="activeTab === 'three'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('withdraw-config')" label="提现相关设置" name="five">
        <el-tabs type="border-card" :value="subActiveTab1" @tab-click="subChangeTab1" v-show="activeTab1 === 'five'">
          <el-tab-pane name="five-one" label="普通提现设置">
            <withdraw-configs v-show="subActiveTab1 === 'five-one'"/>
          </el-tab-pane>
          <el-tab-pane name="five-two" label="大额提款设置">
            <withdraw-Vip v-show="subActiveTab1 === 'five-two'"/>
          </el-tab-pane>
          <el-tab-pane name="five-three" label="代理提现设置">
            <withdraw-agency v-show="subActiveTab1 === 'five-three'"/>
          </el-tab-pane>
          <el-tab-pane name="five-four" label="通用设置">
            <withdraw-setting v-show="subActiveTab1 === 'five-four'"/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane v-if="roleCheck('withdraw-risk-config')" label="提现风控设置" name="six">
        <withdraw-risk v-show="activeTab === 'six'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('withdraw-single')" label="提现分单设置" name="seven">
        <el-tabs type="border-card" :value="subActiveTab2" @tab-click="subChangeTab2">
          <el-tab-pane v-if="roleCheck('withdraw-single-main')"  name="seven-one" label="分单功能设置">
            <single-main v-show="subActiveTab2 === 'seven-one'"/>
          </el-tab-pane>
          <el-tab-pane v-if="roleCheck('withdraw-single-account')" name="seven-two" label="分单账户设置">
            <single-account v-show="subActiveTab2 === 'seven-two'"/>
          </el-tab-pane>
          <el-tab-pane v-if="roleCheck('withdraw-single-auto')"  name="seven-three" label="自动出款设置">
            <single-auto v-show="subActiveTab2 === 'seven-three'"/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <!--//todo 待确认是否取消，待转移到风险控制功能下-->
      <!--<el-tab-pane label="提现策略设置" name="four">-->
      <!--<withdraw-strategy v-show="activeTab === 'four'" />-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="第三方提现设置" name="six">-->
      <!--<withdraw-escrows v-show="activeTab === 'six'" />-->
      <!--</el-tab-pane>-->
    </el-tabs>

  </div>
</template>

<script>
import withdrawAuto from '@/views/finance/withdraw/auto';
import withdrawAutoThree from '@/views/finance/withdraw/autoThree';
import withdrawAutoRecord from '@/views/finance/withdraw/autoRecord';
import withdrawManual from '@/views/finance/withdraw/manual';
import withdrawManualRecord from '@/views/finance/withdraw/manualRecord';
import WithdrawExceptions from '@/views/finance/withdraw/exceptions';
import WithdrawAudit from '@/views/finance/withdraw/audit';
import SingleMain from '@/views/finance/withdraw/singleMain';
import SingleAccount from '@/views/finance/withdraw/singleAccount';
import SingleAuto from '@/views/finance/withdraw/singleAuto';
// import WithdrawStrategy from "@/views/finance/withdraw/strategy";
import WithdrawConfigs from '@/views/finance/withdraw/configs';
import WithdrawEscrows from '@/views/finance/withdraw/escrows';
import WithdrawRisk from '@/views/finance/withdraw/withdrawRisk';
import withdrawVip from '@/views/finance/withdraw/vipConfig';
import withdrawAgency from '@/views/finance/withdraw/agencyConfig';
import withdrawSetting from '@/views/finance/withdraw/normalSetting';
import withdrawSeperate from '@/views/finance/withdraw/withdrawSeperate';
import { tabs } from '@/build';

export default {
  name: 'finance-withdraw',
  components: {
    withdrawAutoThree,
    WithdrawEscrows,
    WithdrawConfigs,
    withdrawAutoRecord,
    // WithdrawStrategy,
    WithdrawAudit,
    WithdrawExceptions,
    withdrawAuto,
    withdrawManual,
    withdrawManualRecord,
    WithdrawRisk,
    withdrawVip,
    withdrawAgency,
    withdrawSetting,
    SingleMain,
    SingleAccount,
    SingleAuto,
    withdrawSeperate,
  },
  mixins: [tabs],
  data() {
    const { subActiveTab } = this.$route.query;
    const { subActiveTab1 } = this.$route.query;
    const { subActiveTab2 } = this.$route.query;
    return {
      activeTab: 'one',
      subActiveTab: subActiveTab || 'one-auto',
      activeTab1: 'five',
      activeTab2: 'seven',
      subActiveTab1: subActiveTab1 || 'five-one',
      subActiveTab2: subActiveTab2 || 'seven-one',
    };
  },
  mounted() {
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '正常提现-三方手动出款', true) });
  },
  methods: {
    changeTab(tabs) {
      this.activeTab = tabs.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, tabs.label, true) });
    },
    subChangeTab(tabs) {
      this.subActiveTab = tabs.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, `正常提现-${tabs.label}`, true) });
    },
    subChangeTab1(tabs) {
      this.subActiveTab1 = tabs.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, `提现相关设置-${tabs.label}`, true) });
    },
    subChangeTab2(tabs) {
      this.subActiveTab2 = tabs.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, `提现分单设置-${tabs.label}`, true) });
    },
  },
};
</script>

<style lang="scss" scoped>
  .app-container .el-select .el-tag{
    max-width: 105px !important;
  }
</style>
